<template>
  <div style="padding: 20px">
    <div class="info-fixed" v-if="fixedTF">
      <div class="info-div">
        <div class="info-div-div">
          <h1>信息完善成功</h1>
          <i class="el-icon-close"></i>
        </div>
        <div class="info-div1">
          已自动匹配《{{updateCompanyInfoData.categoryName}}》行业相关课程
        </div>
        <div class="info-div1">
          课程费：{{updateCompanyInfoData.coursePrice}}元/学时
        </div>
        <div class="info-div2" @click="experience">
          知道了
        </div>
      </div>
    </div>
    <el-card class="box-card" style="margin:0 auto;">
      <div slot="header" class="clearfix">
        <span>>>明德培训 完善信息</span>
      </div>
      <div class="title">企业名称: {{ list.companyName }}</div>
      <div class="title">统一社会信用代码: {{ list.companyCode }}</div>
      <div class="title">企业联系人: {{ list.userName }}</div>
      <div class="title">企业联系人电话: {{ list.userPhone }}</div>

      <div class="line"/>
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 80%; margin-left:50px;">
        <el-form-item label="选择行业" prop="categoryId">
          <el-select v-model="dataForm.categoryId" filterable placeholder="大类" @change="choseBigCategory">
            <el-option v-for="item in bigCategory" :key="item.id" :label="item.categoryName" :value="item.id"/>
          </el-select>
          <el-select v-model="dataForm.smallCategoryId" filterable placeholder="小类" @change="choseSmallCategory">
            <el-option v-for="item in smallCategory" :key="item.id" :label="item.categoryName" :value="item.id"/>
          </el-select>
          <el-select v-model="dataForm.jutiCategoryId" filterable placeholder="具体行业" >
            <el-option v-for="item in jutiCategory" :key="item.id" :label="item.categoryName" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人姓名" prop="principalName">
          <el-input v-model="dataForm.principalName"/>
        </el-form-item>
        <el-form-item label="负责人电话" prop="principalPhone">
          <el-input v-model="dataForm.principalPhone" type="number"/>
        </el-form-item>
        <el-form-item label="管理人姓名" prop="adminName">
          <el-input v-model="dataForm.adminName"/>
        </el-form-item>
        <el-form-item label="管理人电话" prop="adminPhone">
          <el-input v-model="dataForm.adminPhone" type="number"/>
        </el-form-item>
        <el-form-item label="企业地址">
          <div style="width: 346px;">
            <defCity  @cityData="cityData" :defData="defData" />
          </div>
        </el-form-item>
        <el-form-item label="详细地址" prop="companyAddress">
          <el-input v-model="dataForm.companyAddress" />
        </el-form-item>
        <el-form-item label="企业总人数" prop="totalPeopleNum">
          <el-input v-model="dataForm.totalPeopleNum" type="number"/>
        </el-form-item>
        <el-form-item label="劳动者总人数" prop="totalJobPeopleNum">
          <el-input v-model="dataForm.totalJobPeopleNum" />
        </el-form-item>
      </el-form>
      <el-button size="mini" type="primary" style="margin-left:200px " @click="completeInfoFunc()">提交</el-button>


    </el-card>
  </div>
</template>

<style>
.info-fixed{
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .5);
  width: 100%;
  height: 100%;
  z-index: 999;
}
.el-form-item__content{
  display: flex;
}
.el-select{
  margin-right: 5px;
}
.info-div{
  width:500px;
  height: 500px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.info-div-div{
  border-bottom: 1px solid #b5b5b5;
  display: flex;
  height: 100px;
  padding:0 20px;
  align-items: center;
  justify-content: space-between;
}
.info-div-div h1{
  font-size: 26px;
  color: #262626;
  font-weight: 500;
}
.info-div1{
  width: 100%;
  text-align: center;
  margin-top: 70px;
  font-size: 20px;
}
.info-div2{
  width:409px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
  margin: 0 auto;
  margin-top: 100px;
  background-color: #1679FB;
  height: 52px;
}
  .constant{
    width: 100%;
  }
  .img{
    margin-top: 20px;
    width: 150px;
    height: 150px;
  }
  .img img{
    width: 100%;
    height: 100%;
  }
  .list{
    width: 100%;
  }
  .list-cell{
    width: 100%;
    line-height: 50px;
  }
  .cell{
    width: 100%;
    /*display: inline-flex;*/
  }
  .set{
    color: deepskyblue;
  }
  .line{
    width: 100%;
    border-bottom: 2px solid #f6f6f6;
    margin-bottom: 5px;
  }
  .erweima{
    width: 100%;
    border-bottom: 2px solid #f6f6f6;
  }
  .text {
    font-size: 14px;
  }

  .title {
    margin: 0px auto 20px auto;
    /*text-align: center;*/
    font-weight: bold;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 600px;
  }
</style>

<script>
import { companyCompleteInfo, queryCompanyInfo, industryCategory, queryCourseCompanyInfo, industryCategoryAll, queryCourseAll, queryCityData } from '@/api/companyOperate'
import { uploadPath } from '@/api/storage'
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination'
import TagsView from '../layout/components/TagsView' // Secondary package based on el-pagination
import defCity from '@/components/BaseCity/defCity'

export default {
  name: 'CompleteInfoFunc',
  components: { TagsView, Pagination, defCity },
  data() {
    return {
      uploadPath,
      fixedTF:false,
      dataForm: {
        id: undefined,
        courseId: undefined,
        companyName: undefined,
        companyCode: undefined,
        companyAddress: undefined,
        logoPasswd: undefined,
        categoryName: undefined,
        userName: undefined,
        userPhone: undefined,
        categoryId: undefined,
        smallCategoryId: undefined,
        jutiCategoryId: undefined,
        counselorName: undefined,
        counselorPhone: undefined,
        principalName: undefined,
        principalPhone: undefined,
        adminName: undefined,
        adminPhone: undefined,
        payPeopleNum: undefined,
        unpayPeopleNum: undefined,
        totalPeopleNum: undefined,
        totalJobPeopleNum: undefined,
        deleteMark: undefined,
        createDate: undefined,
        defData: []

      },
      industryCategoryList: undefined,
      industryCategoryParam: {
        pid: 0
      },
      industryCategoryAllList: undefined,
      bigCategory: undefined,
      smallCategory: undefined,
      jtCategory: undefined,

      updateCompanyInfoData:{
        categoryName:undefined,
        coursePrice: undefined,
      },
      list: undefined,
      listLoading: true,
      dialogFormVisible: false,
      downloadLoading: false,
      rules: {
        principalName: [
          { required: true, message: '负责人不能为空', trigger: 'blur' }
        ],
        principalPhone: [
          { required: true, message: '负责人电话不能为空', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '行业大类不能为空', trigger: 'blur' }
        ],
        // companyAddress: [
        //   { required: true, message: '地址不能为空', trigger: 'blur' }
        // ],
        adminName: [
          { required: true, message: '管理人员名字不能为空', trigger: 'blur' }
        ] ,
        adminPhone: [
          { required: true, message: '管理人员电话不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init: function() {
      this.list=''
      this.getData()
      this.queryCity()
      this.queryIndustryCategoryAll()
    },
    cityData (e) {
      this.dataForm.provinceName = e.province.label
      this.dataForm.cityName = e.city.label
      this.dataForm.areaName = e.area.label
    },
    getData() {
      this.listLoading = true
      queryCompanyInfo()
        .then(response => {
          this.dataForm = this.list = response.data.data
          // this.queryCity()
          // this.dataForm.companyAddress="贵州省贵阳市观山湖区"
          console.log(this.dataForm.bigCategory)
          console.log(this.dataForm.bigCategoryId)
          if(this.dataForm.categoryId == 0 || this.dataForm.categoryId == undefined) {
            this.dataForm.categoryId = "";
          }
          if(this.dataForm.smallCategoryId == 0) {
            this.dataForm.smallCategoryId = "";
          }
          if(this.dataForm.jutiCategoryId == 0) {
            this.dataForm.jutiCategoryId = "";
          }

          this.listLoading = false
        })
        .catch(() => {
          this.list = undefined
          this.listLoading = false
        })
    },
    queryCity() {
      this.listLoading = true
      queryCityData()
        .then(response => {
          this.dataForm.companyAddress = response.data.data
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },

    queryIndustryCategory() {
      industryCategory(this.industryCategoryParam)
        .then(response => {
          this.industryCategoryList = response.data.data.items
        })
        .catch(() => {
          this.industryCategoryList = undefined
        })
    },
    queryIndustryCategoryAll() {
      industryCategoryAll()
        .then(response => {
          this.industryCategoryAllList = this.bigCategory = response.data.data
          // 接收数据并缓存
          for (var i in this.bigCategory) {
            if (this.dataForm.categoryId === this.bigCategory[i].id) {
              this.smallCategory = this.bigCategory[i].adminIndustryCategoryVos
              for (var j in this.smallCategory) {
                if (this.dataForm.smallCategoryId === this.smallCategory[j].id) {
                  this.jutiCategory = this.smallCategory[j].adminIndustryCategoryVos
                }
              }
            }
          }
        })
        .catch(() => {
          this.industryCategoryAllList = undefined
        })
    },
    // 选择大分类
    choseBigCategory: function(e) {
      this.smallCategory = undefined // 重置数据
      this.dataForm.smallCategoryId = undefined // 重置选项
      this.jutiCategory = undefined // 重置数据
      this.dataForm.jutiCategoryId = undefined // 重置选项
      for (var i in this.bigCategory) {
        if (e === this.bigCategory[i].id) {
          this.smallCategory = this.bigCategory[i].adminIndustryCategoryVos
          this.dataForm.smallCategoryId = this.smallCategory[0].id // 默认第一项
          this.jutiCategory = this.smallCategory[0].adminIndustryCategoryVos
          this.dataForm.jutiCategoryId = this.jutiCategory[0].id // 默认第一项

        }
      }
    },
    // 选择小分类
    choseSmallCategory: function(e) {
      this.jutiCategory = undefined
      this.dataForm.jutiCategoryId = undefined // 重置选项
      for (var i in this.smallCategory) {
        if (e === this.smallCategory[i].id) {
          this.jutiCategory = this.smallCategory[i].adminIndustryCategoryVos
          this.dataForm.jutiCategoryId = this.jutiCategory[0].id  // 默认第一项
        }
      }
    },
    // 选择具体行业
    choseJutiCategory: function(e) {
      for (var i in this.jutiCategory) {
        if (e === this.jutiCategory[i].id) {
          this.dataForm.jutiCategoryId = this.jutiCategory[i].id}
      }
    },
    completeInfoFunc() {
      var that = this;
      companyCompleteInfo(this.dataForm)
        .then(response => {
          this.updateCompanyInfoData= response.data.data
          this.fixedTF= true;
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.message
          })
        })
    },
    experience() {
      // this.$router.push({ path: '/companyOperateManage/companyHome' })
      this.$router.push({ path: '/' })  //首页
      this.fixedTF = false;
    }
  }
}
</script>
